<template>
    <div>
        <el-tabs v-model="is_patrol" type="card" @tab-click="isPatrolChange">
            <el-tab-pane label="火警" :name="3"></el-tab-pane>
            <el-tab-pane label="监管" :name="1"></el-tab-pane>
            <el-tab-pane label="故障" :name="2"></el-tab-pane>
        </el-tabs>
        <el-form :model="search" inline size="mini">
            <el-form-item label="发生位置">
                <el-input v-model="search.address" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="设备编号">
                <el-input v-model="search.device_no" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="关键字">
                <el-input v-model="search.keyword" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item label="发生时间">
                <el-date-picker v-model="search.date" type="daterange" range-separator="至" value-format="YYYY-MM-DD"
                    start-placeholder="开始时间" end-placeholder="结束时间" @change="changeTime" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getDataList()" size="mini">搜索</el-button>
                <el-button type="warning" @click="reset" size="mini">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" size="mini" style="width: 100%" border height="50vh">
            <el-table-column type="index" label="id" width="80" align="center"></el-table-column>
            <el-table-column prop="address" label="发生位置" align="center"></el-table-column>
            <el-table-column prop="device_no" label="设备编号" align="center"></el-table-column>
            <el-table-column prop="device_name" label="设备类型" align="center"></el-table-column>
            <el-table-column prop="device_remark" label="事件描述" align="center"> </el-table-column>
            <el-table-column prop="yj_unit_name" label="所属单位" align="center"></el-table-column>
            <el-table-column prop="create_time" label="发生时间" width="110" align="center">
                <template #default="scope">
                    <span>{{ $getDateTime(scope.row.create_time) }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="量值" align="center" prop="device_data" width="150">
        <template #default="{ row }">
          <span v-if="row.measure">{{ row.measure }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column> -->
            <el-table-column prop="status_text" label="状态" align="center"> </el-table-column>
            <el-table-column label="操作" width="100" fixed="right" align="center">
                <template #default="scope">
                    <el-button size="mini" type="primary" @click="lookDetails(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination @current-change="getDataList" size="mini" v-model:currentPage="dataListInfo.page"
                :page-count="dataListInfo.total_page" :total="dataListInfo.total"
                layout="total,prev, pager, next, jumper" background />
        </div>
        <!-- 详情 start -->
        <el-dialog v-model="showDetailsDialog" v-if="showDetailsDialog" width="70%" @close="closeDetailsDialog"
            :close-on-click-modal="false">
            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="详情" name="detail"></el-tab-pane>
                <el-tab-pane label="设备上报记录" name="report"></el-tab-pane>
            </el-tabs>
            <div v-if="activeName === 'detail'">
                <deviceReportShow :details="details" :isAll="true"></deviceReportShow>
            </div>
            <div v-else class="report-wrapper">
                <el-table :data="historyTabletableData" border style="width: 100%">
                    <el-table-column prop="device_no" label="设备编号"> </el-table-column>
                    <el-table-column label="事件">
                        <template #default="scope">
                            <div v-html="scope.row.event_type"></div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="量值">
            <template #default="{ row }">
              <span v-if="row.measure">{{ row.measure }}</span>
              <span v-else>-</span>

            </template>
          </el-table-column> -->
                    <el-table-column prop="create_time" label="开始时间">
                        <template #default="scope">
                            <span>
                                {{ $getDateTime(scope.row.create_time) }}
                            </span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作">
            <template #default="scope">
              <el-button
                v-if="scope.row.exec_remark != '设备离线'"
                type="primary"
                @click="innerShowDetail(scope.row)"
                size="mini"
                >详情</el-button
              >
            </template>
          </el-table-column> -->
                </el-table>
            </div>
            <div v-if="activeName === 'report'" class="block report">
                <el-pagination @current-change="getHistoryInfoList" v-model:currentPage="historyTableDataInfo.page"
                    :page-count="historyTableDataInfo.total_page" :total="historyTableDataInfo.total" background
                    layout="total,prev, pager, next">
                </el-pagination>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeDetailsDialog">返 回</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 详情 end -->
        <!-- 详情 start -->
        <el-dialog v-model="innerShowDetailsDialog" v-if="innerShowDetailsDialog" width="70%"
            @close="closeInnerDetailsDialog" :close-on-click-modal="false">
            <deviceReportShow :details="innerdetails" :isAll="true"></deviceReportShow>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="innerShowDetailsDialog = false">返 回</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 详情 end -->
    </div>
</template>

<script>
import { setDeviceData } from '@/util/deviceData'
// 标识组件
import deviceReportShow from '@/views/xfSupervise/components/deviceReportShow.vue'
import dayjs from 'dayjs'
export default {
    props: ['yuJingType', 'yuJingStatus'],
    components: {
        deviceReportShow
    },
    data() {
        return {
            dataList: [],
            dataListInfo: '',
            search: {},
            yuJingBoBaoDetailsDialog: false,
            innerdetails: '',
            showDetailsDialog: false,
            activeName: 'detail',
            historyTableData: [],
            historyTableDataInfo: '',
            innerShowDetailsDialog: false,
            details: '',
            day: null
        }
    },
    created() {
        this.method = this.yuJingType
        this.is_patrol = this.yuJingType
        // this.day = [dayjs().subtract(1, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
        this.day = ''
        this.search.date = this.day
        this.search.start_time = this.day[0]
        this.search.end_time = this.day[1]
        this.getDataList()
    },
    methods: {
        reset() {
            this.search = {}
            this.search.date = this.day
            this.search.start_time = this.day[0]
            this.search.end_time = this.day[1]
            this.getDataList(1)
        },
        changeTime() {
            if (this.search.date) {
                this.search.start_time = this.search.date[0]
                this.search.end_time = this.search.date[1]
            } else {
                this.search.start_time = ''
                this.search.end_time = ''
            }
        },
        isPatrolChange(e) {
            this.method = e.props.name
            this.search = {}
            this.search.date = this.day
            this.search.start_time = this.day[0]
            this.search.end_time = this.day[1]
            this.getDataList(1)
        },
        statusFormatter(row, column, cellValue, index) {
            let temp = ['', '未处理', '已处理']
            return temp[cellValue]
        },
        innerShowDetail(row) {
            this.innerdetails = row
            this.innerShowDetailsDialog = true
            this.ondetailShow(row)
        },
        handleClick() {
            if (this.activeName === 'detail') {
                this.getHistoryInfoList()
            }
        },
        async getHistoryInfoList(page) {
            let pageNum = 1
            if (page) {
                pageNum = page
            }
            let resp = await this.$api.post('/unit/DeviceWarning/Lists', {
                page: pageNum,
                rows: 6,
                device_no: this.device_no,
                device_method: 1
            })
            this.historyTabletableData = await setDeviceData(resp.data.list)
            console.log(this.historyTabletableData)
            delete resp.data.list
            this.historyTableDataInfo = resp.data
        },
        closeDetailsDialog() {
            this.activeName = 'detail'
            this.showDetailsDialog = false
        },
        //   预警播报数据
        async getDataList(page) {
            let pageNum = 1
            if (page) {
                pageNum = page
            }

            let is_wxc = 1;
            if (this.search.date.length > 0) {
                is_wxc = 0
            }

            let params = {
                rows: 10,
                is_wxc,
                page: pageNum,
                status: this.yuJingStatus,
                method: this.method || '',
                ...this.search
            }
            // params.method = this.yuJingType;
            let resp = await this.$api.post('/unit/DeviceWarning/Lists', params)
            //   this.dataList = resp.data.list
            this.dataList = await setDeviceData(resp.data.list, this.yuJingType)
            console.log(this.dataList, '333')

            this.dataListInfo = resp.data
        },
        //   详情
        lookDetails(row) {
            this.details = row
            this.showDetailsDialog = true
            this.ondetailShow(row)
        },
        ondetailShow(row) {
            this.device_no = row.device_no
            let new_device_data = row.device_method
            if (new_device_data == '4gWirelessPressure') {
                new_device_data = 'fgWirelessPressure'
            }
            if (new_device_data == '4gWirelessLiquidLevel') {
                new_device_data = 'fgWirelessLiquidLevel'
            }
            this.device_method = new_device_data
        }
    }
}
</script>

<style scoped>
.block {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
</style>
